import { useEffect, useState } from 'react';
import { message, Tag } from 'antd';
import { groupBy } from 'lodash';
import moment from 'moment';
import { useModel } from 'umi';
import { getNotices } from '@/services/ant-design-pro/api';

import NoticeIcon from './NoticeIcon';
import styles from './index.less';

export type GlobalHeaderRightProps = {
  fetchingNotices?: boolean;
  onNoticeVisibleChange?: (visible: boolean) => void;
  onNoticeClear?: (tabName?: string) => void;
};

const getNoticeData = (notices: API.NoticeIconItem[]): Record<string, API.NoticeIconItem[]> => {
  if (!notices || notices.length === 0 || !Array.isArray(notices)) {
    return {};
  }

  const newNotices = notices.map((notice) => {
    const newNotice = { ...notice };

    if (newNotice.datetime) {
      newNotice.datetime = moment(notice.datetime as string).fromNow();
    }

    if (newNotice.id) {
      newNotice.key = newNotice.id;
    }

    if (newNotice.extra && newNotice.status) {
      const color = {
        todo: '',
        processing: 'blue',
        urgent: 'red',
        doing: 'gold',
      }[newNotice.status];
      newNotice.extra = (
        <Tag
          color={ color }
          style={ {
            marginRight: 0,
          } }
        >
          { newNotice.extra }
        </Tag>
      ) as any;
    }

    return newNotice;
  });
  return groupBy(newNotices, 'type');
};

const getUnreadData = (noticeData: Record<string, API.NoticeIconItem[]>) => {
  const unreadMsg: Record<string, number> = {};
  Object.keys(noticeData).forEach((key) => {
    const value = noticeData[key];

    if (!unreadMsg[key]) {
      unreadMsg[key] = 0;
    }

    if (Array.isArray(value)) {
      unreadMsg[key] = value.filter((item) => !item.read).length;
    }
  });
  return unreadMsg;
};

const NoticeIconView = () => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [ notices, setNotices ] = useState<API.NoticeIconItem[]>([]);

  useEffect(() => {
    getNotices().then(({ data }) => setNotices(data || []));
  }, []);

  const noticeData = getNoticeData(notices);
  const unreadMsg = getUnreadData(noticeData || {});

  const changeReadState = (id: string) => {
    setNotices(
      notices.map((item) => {
        const notice = { ...item };
        if (notice.id === id) {
          notice.read = true;
        }
        return notice;
      }),
    );
  };

  const clearReadState = (title: string, key: string) => {
    setNotices(
      notices.map((item) => {
        const notice = { ...item };
        if (notice.type === key) {
          notice.read = true;
        }
        return notice;
      }),
    );
    message.success(`${ '清空了' } ${ title }`);
  };

  return (
    <NoticeIcon
      className={ styles.action }
      count={ currentUser && currentUser.unreadCount }
      onItemClick={ (item) => {
        changeReadState(item.id!);
      } }
      onClear={ (title: string, key: string) => clearReadState(title, key) }
      loading={ false }
      clearText='清空'
      viewMoreText='查看更多'
      onViewMore={ () => message.info('Click on view more') }
      clearClose
    >
      <NoticeIcon.Tab
        tabKey='notification'
        count={ unreadMsg.notification }
        list={ noticeData.notification }
        title='通知'
        emptyText='你已查看所有通知'
        showViewMore
      />
      <NoticeIcon.Tab
        tabKey='message'
        count={ unreadMsg.message }
        list={ noticeData.message }
        title='消息'
        emptyText='您已读完所有消息'
        showViewMore
      />
      <NoticeIcon.Tab
        tabKey='event'
        title='待办'
        emptyText='你已完成所有待办'
        count={ unreadMsg.event }
        list={ noticeData.event }
        showViewMore
      />
    </NoticeIcon>
  );
};

export default NoticeIconView;
